<template>
  <div>
    <yd-flexbox>
      <yd-flexbox-item>
        <yd-slider autoplay="3000">
          <yd-slider-item v-for="img in toplist">
            <a :href="'/news/newsdetail?settingId=' + img.settingId">
              <img :src="img.image">
            </a>
          </yd-slider-item>
        </yd-slider>
      </yd-flexbox-item>
    </yd-flexbox>
    <p class="cell_dashed"></p>
    <yd-flexbox style="margin: 5px;padding: 5px;">
      <yd-flexbox-item style="line-height: 30px">
        <div style="float: left;font-size: initial;">物业服务</div>
      </yd-flexbox-item>
    </yd-flexbox>

    <p class="cell_dashed"></p>

    <yd-flexbox style="margin: 5px;padding: 5px;">
      <yd-flexbox-item style="text-align: center">
        <a href="/news">
          <yd-icon name="tzgg" size="1rem" color="#1296db" custom></yd-icon>
          <div>通知公告</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item style="text-align: center">
        <a href="/wylist">
          <yd-icon name="wydt" size="1rem" color="#1296db" custom></yd-icon>
          <div>物业动态</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item style="text-align: center">
        <a href="/houserent">
          <yd-icon name="fwzs" size="1rem" color="#1296db" custom></yd-icon>
          <div>房屋租售</div>
        </a>
      </yd-flexbox-item >
      <yd-flexbox-item style="text-align: center">
        <a href="/feeRecord" >
          <yd-icon name="zdcx" size="1rem" color="#1296db" custom></yd-icon>
          <div>账单查询</div>
        </a>
      </yd-flexbox-item>
    </yd-flexbox>
    <yd-flexbox style="margin: 5px;padding: 5px;">
      <yd-flexbox-item style="text-align: center">
        <a href="/myfee">
          <yd-icon name="wyjf" size="1rem" color="#1296db" custom></yd-icon>
          <div>物业缴费</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item style="text-align: center">
        <a href="/applymaintain">
          <yd-icon name="bsbx" size="1rem" color="#1296db" custom></yd-icon>
          <div>报事报修</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item style="text-align: center">
        <a href="/suggest">
          <yd-icon name="tsjy" size="1rem" color="#1296db" custom></yd-icon>
          <div>投诉建议</div>
        </a>
      </yd-flexbox-item >
      <yd-flexbox-item style="text-align: center">

      </yd-flexbox-item>
    </yd-flexbox>

    <yd-flexbox style="margin: 5px;padding: 5px;">
      <yd-flexbox-item style="line-height: 30px">
        <div style="float: left;font-size: initial;">生活服务</div>
      </yd-flexbox-item>
    </yd-flexbox>
    <p class="cell_dashed"></p>
    <yd-flexbox style="margin: 5px;padding: 5px;">
      <yd-flexbox-item style="text-align: center">
        <a href="/housekeep">
          <yd-icon name="jzfw" size="1rem" color="#1296db" custom></yd-icon>
          <div>家政服务</div>
        </a>
      </yd-flexbox-item >
      <yd-flexbox-item style="text-align: center">
        <a href="/hotactive">
          <yd-icon name="xqhd" size="1rem" color="#1296db" custom></yd-icon>
          <div>小区活动</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item style="text-align: center">
        <a href="/hrlist">
          <yd-icon name="ryzp" size="1rem" color="#1296db" custom></yd-icon>
          <div>人员招聘</div>
        </a>
      </yd-flexbox-item>
      <yd-flexbox-item>
      </yd-flexbox-item>

    </yd-flexbox>
    <p class="cell_dashed"></p>
    <yd-flexbox-item v-for="ad in imglist" style="margin: 10px 0px;">
      <yd-slider autoplay="3000">
        <yd-slider-item>
          <a :href="'/news/newsdetail?settingId=' + ad.settingId">
            <img :src="ad.image">
          </a>
        </yd-slider-item>
      </yd-slider>
    </yd-flexbox-item>
  </div>
</template>

<script>
  import {mapActions, mapState} from "vuex";

  export default {
    data() {
      return {
        toplist: null,
        detail: {}, //
        imglist:null
      };
    },
    created() {
      this.isLoading(true);
      //top
      this.axios.post(root + "/api/wx/ad/list", {key:"topview"}).then(res => {
        this.isLoading(false);
        this.toplist = res.data.data;
      });
      //img
      this.axios.post(root + "/api/wx/ad/list", {key:"img"}).then(res => {
        this.isLoading(false);
        this.imglist = res.data.data;
      });
    },
    methods: {
      ...mapActions(["isLoading"])
    },
    computed: {
      ...mapState(["is_loading"])
    }
  };
</script>>

<style lang="less">
  @import "../../common/style/mixin.less";
  @font-face {
    font-family: 'wuguan';
    src: url('./iconfont/iconfont.ttf') format('truetype');
  }
  [class^="icon-custom-"]:before, [class*=" icon-custom-"]:before {
    font-family: 'wuguan';
  }
  .icon-custom-tzgg:before {
    content: '\E615';
  }
  .icon-custom-wydt:before {
    content: '\E601';
  }
  .icon-custom-fwzs:before {
    content: '\E616';
  }
  .icon-custom-zdcx:before {
    content: '\E607';
  }
  .icon-custom-wyjf:before {
    content: '\E618';
  }
  .icon-custom-bsbx:before {
    content: '\E603';
  }
  .icon-custom-tsjy:before {
    content: '\E614';
  }
  .icon-custom-jzfw:before {
    content: '\E61f';
  }
  .icon-custom-xqhd:before {
    content: '\E61b';
  }
  .icon-custom-ryzp:before {
    content: '\E61c';
  }
  .cell_dashed{
    border-bottom:1px dashed #999999;
    height: 1px;
    margin-left: 10px;
    margin-right: 10px;

  }


  .detail {
    height: 100%;
    background: #fff;

    .content {
      padding: 0.35rem 0.3rem;
      .bor1pxTop;

      .head {
        padding-bottom: 0.35rem;

        .time {
          color: #999;
          .ft(0.2rem);
          margin-top: 0.21rem;
        }
      }

      .container {
        //   .bor1pxTop;
        padding-top: 0.15rem;

        p {
          .ft(0.26rem);
          line-height: 0.44rem;
          color: #404040; //text-indent: 2em;
        }

        img {
          display: block;
          margin: 0.2rem auto;
          max-width: 100%;
        }
      }
    }

    .public-head {
      position: relative;
      display: -webkit-flex;
      justify-content: space-between;
      align-items: center;
      height: 1.1rem;
      color: #222;
      font-size: 0.36rem;
      padding: 0 0.3rem;
      background: #fff;
      z-index: 1000;
    }
  }
</style>
